<template>
	<div id="footer">
		<ul>
			<!-- 路由跳转 -->
			<router-link tag="li" to="/shouye">
				<img src="../assets/首页.png"/>
				<p>首页</p>
			</router-link>
			<router-link tag="li" to="/category">
				<img src="../assets/分类.png"/>
				<p>分类</p>
			</router-link>
			<router-link tag="li" to="/cart">
				<img src="../assets/购物车空.png"/>
				<p>购物车</p>
			</router-link>
			<router-link tag="li" to="/mine">
				<img src="../assets/我的.png"/>
				<p>我的</p>
			</router-link>
		</ul>
		<router-view></router-view>
	</div>
</template>

<script>
	export default {
	  name: 'Tabbar',
	}
</script>

<style scoped>
	*{
		margin: 0;
		padding: 0;
	}
	#footer{
		position: fixed;
		bottom: 0rem;
		left: -1rem;
		height: 3.4rem;
		width: 110%;
		border-top:gainsboro solid 0.0625rem;
		z-index: 100;
		background-color: whitesmoke;
	}
	ul li{
		display: inline-block;
		width: 20%;
		text-align: center;
		font-size:0.5rem ;
	}
	ul{
		margin-top: 0.5rem;
	}
	img{
		width: 1.75rem;
		height: 1.75rem;
	}
	.addpage{
		font-size: 2rem;
		text-align: center;
	}
	/* 单击路由是激活路由样式 */
	.router-link-active{
		color: skyblue;
	}
</style>